import React, { useContext, useState, useCallback, useEffect } from 'react';
import { myContext } from '../../../../reducer'
import { postAccPayHasPay } from '../../api'
import { paymentTypeEnum } from '../../enum'
//style
import { AwaitPaymentAll } from './style'
import { PageHeader, Table, message } from 'antd'

/**
/* @description: 已经支付列表页面
/* @author: xiaoxujs
/* @updata: xiaoxujs（2021-08-02） 创建页面
*/

const OverPaymentList = () => {
    const { state } = useContext(myContext)
    const [listData, setListData] = useState([]) //list
    const [total, setTotal] = useState(0) // total
    const [currentPage, setCurrentPage] = useState(1) //当前页
    const [size, setSize] = useState(10) //当页条数
    const listFun = useCallback(
        (parames = {
            currentPage: 1,
            size: 10
        }) => {
            ; (async () => {
                const { code, msg, data } = await postAccPayHasPay(parames)
                if (code === '20000') {
                    setListData(data.records)
                    setTotal(data.total)
                    setCurrentPage(parames.currentPage)
                    setSize(parames.size)
                } else {
                    message.error(msg)
                }
            })()
        },
        [],
    )
    useEffect(() => {
        listFun()
    }, [listFun])

    //分页
    const pagination = {
        //是否可以改变pagesize//
        showSizeChanger: true,
        //是否可以快速跳转到某页
        showQuickJumper: true,
        //展示一共有多少条数据//
        showTotal: () => `共${total}条`,
        //每页条数
        pageSize: size,
        //当前页数
        current: currentPage,
        //数据总数
        total: total,
        //pageSize 变化的回调
        onShowSizeChange: (current, pageSize) => changePageSize(pageSize, current),
        //页码改变的回调，参数是改变后的页码及每页条数
        onChange: (current) => changePage(current),
    }
    //改变每页条数
    const changePageSize = (pageSizeFun, current) => {
        const parames = {
            currentPage: current,
            size: pageSizeFun
        }
        listFun(parames);
    }
    //改变页数
    const changePage = (current) => {
        const parames = {
            currentPage: current,
            size
        }
        listFun(parames);
    }

    const columns = [
        {
            title: '#',
            render: (text, recode, index) => <span>{index + 1}</span>
        },
        {
            title: '申请人名称',
            dataIndex: 'applicantName',
            // render: (text, recode) => <Button type = 'link' onClick = {() => handleEnterDetails(recode.conNo, recode.id)} >{text}</Button>
        },
        {
            title: '申请时间',
            dataIndex: 'createTime'
        },
        {
            title: '接口事由',
            dataIndex: 'matter'
        },
        {
            title: '申请金额',
            dataIndex: 'money'
        },
        {
            title: '费用申请流水号',
            dataIndex: 'serialNo'
        },
        {
            title: '付款时间',
            dataIndex: 'paymentDate'
        },
        {
            title: '付款人',
            dataIndex: 'paymentMain'
        },
        {
            title: '付款方式',
            dataIndex: 'paymentType',
            render: text => <span>
                {
                    text ? "垫付" : "现金"
                }
            </span>
        }
    ];
    return <AwaitPaymentAll>
        <PageHeader
            className="site-page-header"
            title={paymentTypeEnum[state.paymentType]}
        />

        <Table dataSource={listData} columns={columns} pagination={pagination} rowKey='id' />
    </AwaitPaymentAll>
}

export default OverPaymentList